<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
  <h1>{{ data.count}}</h1>
  <h1>{{ countString}}</h1>
  <button @click="click">点击</button>
</div>

<script>
  const {createApp, ref, computed, watch, toRefs} = Vue;
  let config = {
    setup() {
      const data = ref({count: 0})
      const countString = computed({
        get() {
          return data.value.count + "次"
        }
      })
      const click = () => {
        data.value.count++
      }
      const {count} = toRefs(data.value)
      watch(() => data.value.count, (value, oldValue) => {
        console.log('sub', value, oldValue)
      })
      watch(count, (value, oldValue) => {
        console.log('sub', value, oldValue)
      })
      // watch(data, (value, oldValue) => {
      //   console.log(value, oldValue)
      // }, {deep: true})
      return {data, countString, click};
    },
  };
  createApp(config).mount("#Application");
</script>
</body>
</html>